<template>
    <div class="e-form">
        <BillTop @cancel="printHandel"></BillTop>
        <div class="tabs">
            <!-- {{webData}} -->
                    <div id="baseInfoCon" class="con">
                        <div class="tabs-title" id="baseInfo">基本信息</div>
                        <div style="width: 100%;" class="form">
                            <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="240px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="结算编号" prop="billNo">{{ formData.billNo }}</el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="机构" prop="orgName">
                                            {{ formData.orgName }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="业务类型" prop="businessTypeKey">
                                            {{ formData.businessTypeValue }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="源单编号" prop="sourceNo">
                                            <template>
                                                <span>{{ formData.sourceNo }}</span>
                                                <span class="a" @click="viewYuanDan(formData.sourceId)" v-if="formData.sourceNo">查看</span>
                                            </template>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="结算单位" prop="settlementUnitId">
                                            {{ formData.settlementUnitName }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                       <el-form-item label="结算类型" prop="settlementType">{{setSettleType}}</el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="发票号" prop="invoiceNo">
                                           {{ formData.invoiceNo }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="录入人员" prop="entryPersonnelId">{{ formData.entryPersonnelName }}</el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="不含税金额(元)" prop="taxExcluding">{{ formData.taxExcluding }}</el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="结算日期" prop="settlementDate">
                                            {{ formData.settlementDate }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="税率%" prop="taxRate">
                                            {{ formData.taxRate }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="税价合计" prop="totalAmount">
                                            {{ formData.totalAmount }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="税额" prop="taxAmount">
                                            {{ formData.taxAmount }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="服务单位费用(含税，元)" prop="totalFreight">
                                            <span> {{ formData.totalFreight }} </span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="进场费(元)" prop="slottingFee">
                                            {{ formData.slottingFee }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="赔偿费" prop="damages">
                                            <span> {{ formData.damages }} </span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="退场" prop="isExit">
                                            <el-checkbox v-model="formData.isExit" disabled></el-checkbox>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="退场费" prop="exitFees">
                                            {{ formData.exitFees }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="冲预付款金额(元)" prop="offsetAdvancePayment">
                                            <el-checkbox v-model="formData.isOffsetAdvancePayment" disabled></el-checkbox>&nbsp;
                                            {{ formData.offsetAdvancePayment }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="累计结算金额" prop="cumulativeSettlementAmount">
                                            {{ formData.cumulativeSettlementAmount }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="冲个人借支" prop="isPersonalBorrowing">
                                            <el-checkbox v-model="formData.isPersonalBorrowing" disabled></el-checkbox>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="终期结算" prop="isFinalSettlement">
                                               <el-checkbox v-model="formData.isFinalSettlement" disabled></el-checkbox>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="冲销对象" prop="reversalObjectId">
                                            <div style="display: flex; width: 100%;">
                                                {{ formData.reversalObjectNo }}
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="借支人员" prop="borrowerId">
                                            <div style="display: flex; width: 100%;">
                                                {{ formData.borrowerName }}
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="冲个人借支金额(元)" prop="personalBorrowing">
                                            {{ formData.personalBorrowing }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="状态" prop="state">
                                            草稿
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="传输财务共享" prop="isSharing">
                                            <span> {{ !formData.isSharing ? '未传' : '已传' }} </span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="币种" prop="currencyId">
                                            {{ formData.currency }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="本位币" prop="baseCurId">
                                            <span> {{ formData.baseCurName }} </span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="结算金额(本位币)" prop="baseSettleAmount">
                                            {{ formData.baseSettleAmount }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="人民币汇率" prop="rmbRate">
                                            <span> {{ formData.rmbRate }} </span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="本位币汇率" prop="baseCurRate">
                                            {{ formData.baseCurRate }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="备注" prop="remarks">
                                            {{ formData.remarks }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                    </div>
        </div>
        <div id="seat" :style="{ height: seatHeight + 'px' }"></div>
        <div class="buttons">
             <el-button
                type="primary"
                size="small"
                class="btn-blue"
                @click="preserve"
                v-debounce
                >保存</el-button
            >
            <el-button size="small" @click="printHandel"  v-debounce>取消</el-button>
        </div>
    </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { openAppClient } from '@/utils/common'
// eslint-disable-next-line no-unused-vars
import { getInitRed, addLeaseDisburseBase } from '@/api/settlementManagement/weeklyMaterialSettlement/leaseDisburse'
import { mapState, mapMutations } from 'vuex'
import '@/utils/jquery.scrollTo.min'
export default {
    data () {
        return {
            //表单数据
            formData: {},
            webData: ''
        }
    },
    computed: {
        ...mapState('equip', ['equipData']),
        billId () {
            return this.$route.query.billid
        },
        //当前结算类型
        setSettleType () {
            const obj = {
                1: '内部列账',
                2: '外来发票',
            }
            return obj[this.formData.settlementType]
        },
    },
    watch: {
    },
    created () {
    },
    mounted () {
        this.getData()
    },
    beforeDestroy () {
        window.removeEventListener('scroll', this.winEvent.onScroll)
        window.removeEventListener('resize', this.winEvent.onResize)
    },
    methods: {
        ...mapMutations(['setSelectedInfo']),
        getData () {
            getInitRed({ billId: this.billId })
                .then(res=>{
                    this.formData = res
                })
        },
        // 查看源单
        viewYuanDan (sourceId) {
            const target = this.formData.businessTypeKey ? String(this.formData.businessTypeKey) : ''
            switch (target) {
            case '3': // 周材租赁合同
                openAppClient(`/ctRevolvMaterialApplyShow?billid=${sourceId}&isview=true`, '查看周材租赁合同')
                break
            case '5': // 临时需用计划（租赁）
                openAppClient(`/momentNeedPlanShow?billid=${sourceId}&isview=true`, '查看临时需用计划')
                break
            case '4': // 周材内租调动
                openAppClient(`/revolveInternalLeaseTransferShow?billid=${sourceId}&isview=true`, '查看周材内租调动')
                break
            }
        },
        //返回到列表
        printHandel () {
            this.$router.replace('/turnoverLeaseDisburse')
        },
        //保存
        preserve () {
            this.formData.redState = 3
            this.formData.isExit = this.formData.isExit || false
            this.formData.isFinalSettlement = this.formData.isFinalSettlement || false
            this.formData.isOffsetAdvancePayment = this.formData.isOffsetAdvancePayment || false
            this.formData.isPersonalBorrowing =  this.formData.isPersonalBorrowing || false
            this.formData.nullifyCreated = this.formData.nullifyCreated || ''
            addLeaseDisburseBase(this.formData)
                .then(res=>{
                    this.clientPop('info', '保存成功，是否继续？', () => {
                        this.$router.replace(`/turnoverLeaseDisburseRed?billid=${res}`)
                    }, null, () => {
                        this.$router.replace('/turnoverLeaseDisburse')
                    })
                })
                .catch(()=>{
                    this.webData = this.formData
                })
        }
    }
}
</script>

<style lang="scss" scoped>
.buttons {
    left: 0;
}
.e-form {
    margin-bottom: 80px;
    padding: 0 20px;
    .tabs-title::before {
        content: '';
        height: 22px;
        width: 8px;
        border-radius: 40px;
        background-color: #2e61d7;
        display: block;
        position: absolute;
        left: 20px;
        margin-right: 20px;
    }
}
.e-table {
    background: #fff;
}
.el-tab-pane {
    margin-left: -10px;
}
.mainTitle {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: rgb(246, 246, 246);
    border: 1px solid rgb(236, 236, 236);
    margin: auto;
    margin-bottom: 15px;
    padding-left: 10px;
}
::v-deep.el-table__row{
    .cell{
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
